<template>
	<view class="content">
		<view class="vip" v-for="item in vipList" :key='item.id'>
			<image :src="item.image" mode="widthFix"></image>
			<view class="vip_rank">
				<text class="vip_common">{{item.name}}</text>
				<text class="vip_brank">购买商品可享{{item.zk}}折</text>
			</view>
			<view class="vip_money">
				<text class="money">{{item.price}}元</text>
				<image src="../../../static/images/s37.png" mode="widthFix" @tap='vipbuy(item.id)'></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipList:[]
			}
		},
		onShow() {
			this.vip()
		},
		methods: {
			vip(){
				this.$ajax(
				this.apiList.viplist,
				'POST',
				).then(res=>{
					console.log(res)
					this.vipList = res.data
				})
			},
			vipbuy(id){
				this.$ajax(
				this.apiList.buyvip,
				{
					levelid:id
				},
				'POST'
				).then(res=>{
					if(res.code==0){
						this.$sToast(res.msg)
					}else{
						// uni.requestPayment({
						// 	provider: 'wxpay',//微信支付
						// 	orderInfo: {
						//      "appid": res.data.appid,
						//      "noncestr": res.data.noncestr,
						//      "package": "Sign=WXPay",
						//      "partnerid": res.data.partnerid,
						//      "prepayid": res.data.prepayid,
						//      "timestamp": res.data.timestamp,
						//      "sign": res.data.sign										
						// 	},
						//       success: res => {
						// 		this.$sToast(res.msg)
						//       },
						//       fail: res => {
						// 		  console.log(res)
						// 				this.$sToast('支付失败')
						//       }
						//      });
						
						//小程
						     uni.requestPayment({
						      provider: 'wxpay',//微信支付
						      // parameter: {
						         "appId": res.data.appId,
						         "nonceStr": res.data.nonceStr,
						         "package": res.data.package,
						         // "partnerid": res.data.partnerid,
						         "prepayId": res.data.prepayid,
						         "timeStamp": res.data.timeStamp,
						      "signType":res.data.signType,
						         "paySign": res.data.paySign,
						      // },
						           success: res => {
						         console.log(res)
						       this.$sToast(res.msg)
						       uni.showLoading({
						        title:'支付中...'
													});
											},
						           fail: res => {
						         console.log(res)
						         this.$sToast('支付失败')
						           }
						        });
						}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 30upx;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	& .vip{
		display: flex;
		width: 100%;
		height: 160upx;
		box-sizing: border-box;	
		border: 1upx solid rgba(117, 117, 117, 1);
		padding: 20upx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
		& image{
			width: 112upx;
		}
		& .vip_rank{
			display: flex;
			flex-direction: column;
			width: 45%;
			& .vip_common{
				font-size:32upx;
				font-family:PingFang SC;
				font-weight:400;
				margin-bottom: 20upx;
			}
			& .vip_brank{
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color: rgba(255, 41, 41, 1);
			}
		}
		& .vip_money{
			text-align: right;
			& .money{
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color: rgba(255, 41, 41, 1);
				
				
			}
			& image {
				display: block;
				width:145upx;
				height:51upx;
					margin-top: 20upx;
			}
		}
	}
	& .vip:last-child{
		margin-bottom: 0;
	}
}
</style>
